

<template>
  <input type="text" placeholder="姓名"  v-model="staffMessage.name" >
  <input type="text" placeholder="工资"  v-model="staffMessage.salary" >
  <input type="text" placeholder="工作"  v-model="staffMessage.job">
  <button @click="add">提交</button>
  <hr>
  <table border="1px">
    <caption><b>员工表</b></caption>
    <tr>
      <th>员工编号</th>
      <th>员工姓名</th>
      <th>员工工资</th>
      <th>员工岗位</th>
    </tr>
    <tr v-for="(item , index) in staffMessageArr" >
      <th>{{ index+1 }}</th>
      <th>{{ item.name }}</th>
      <th>{{ item.salary }}</th>
      <th>{{item.job}}</th>
    </tr>
  </table>

</template>
<script setup>
import {ref} from "vue";
let count = 0;
const staffMessageArr = ref([]);
const staffMessage = ref({
  name:'',
  salary: '',
  job:''
});

const add = ()=>{
  // staffMessageArr.value.push(staffMessage.value);
  if (!staffMessage.value.name.trim()){
      alert("输入姓名");
    return;
  }else if(!staffMessage.value.salary.trim()){
    alert("输入工资");
    return;
  }else if (!staffMessage.value.job.trim()){
    alert("输入职业");
    return;
  }else if (isNaN(parseInt(staffMessage.value.salary)))
  {
    alert("工资只能为数字");
    return;
  }
  staffMessageArr.value[count++]=staffMessage.value;
  staffMessage.value={name:'',
    salary: '',
    job:'' };
}

</script>

<style scoped>

</style>